<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="栋号：">
            <el-select @click.native="load()" v-model="building">
                <el-option label="All" value="" ></el-option>
                <el-option v-for="building in check" :key="building" :label="building" :value="building"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="楼层：">
            <el-input ref="flr" v-model="floor" placeholder="请输入数字(不填代表所有)"></el-input>
        </el-form-item>
        <el-table
            :data="Dormitory"
            style="width: 100%"
            max-height="auto">
            <el-table-column
            fixed
            prop="building"
            label="栋"
            >
            </el-table-column>
            <el-table-column
            prop="room"
            label="房间号"
            >
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            >
            <template slot-scope="scope">
                <el-button
                @click.native.prevent="updataRow(scope.row)"
                type="primary"
                size="small">
                修改
                </el-button>
                <el-button
                @click.native.prevent="deleteRow(scope.row)"
                type="danger"
                size="small">
                移除
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="formInline.pagesize"
            :total="total"
            :current-page="currentPage"
            @current-change="page"
        >
        </el-pagination>
    <i class="jiantou" @click="add()">{{AddClass == 'come'?'&gt;':'&lt;'}}</i>
    <Adddormitory :class="'add '+ AddClass"></Adddormitory>
    </el-form>
</template>

<script>
import Adddormitory from '../components/Adddormitory.vue';
export default {
    name:'Dormitorymannager',
    components:{
        Adddormitory
    },
    data() {
        return {
            formInline:{
                building:'',
                floor:'',
                page:1,
                pagesize:10
            },
            building:'',
            floor:'',
            Dormitory:[],
            check:[],
            total:0,
            currentPage:1,
            AddClass:''
        }
    },
    methods:{
        load(){
            let _this = this
            axios.get('http://localhost:8081/admin/check').then(function(resp){
                _this.check = resp.data
            })
        },
        reload(){
            let _this = this
            axios.get('http://localhost:8081/dormitory/getdormitory',{params:_this.formInline}).then(function(resp){
                _this.Dormitory.splice(0)
                resp.data.records.forEach(element => {
                    _this.Dormitory.push({building:element.dorid.split("#")[0],room:element.dorid.split("#")[1]})
                });
                _this.total = resp.data.total
            })
        },
        onSubmit(){
            this.formInline.building = this.building
            this.formInline.floor = this.floor
            this.formInline.page = 1
            if(parseInt(this.formInline.floor)<=0||parseInt(this.formInline.floor)>=10){
                alert('输入的值越界了')
                this.formInline.floor=''
                this.$refs.flr.focus()
                return;
            }
            if(isNaN(parseInt(this.formInline.floor)) && this.formInline.floor != ''){
                alert('输入的值必须是数字或者是空')
                this.formInline.floor=''
                this.$refs.flr.focus()
                return;
            }
            this.reload()
        },
        deleteRow(row){
            let _this = this
            axios.get(`http://localhost:8081/dormitory/deleteOneDor/${row.building}/${row.room}`).then(function(){
                _this.reload();
            }).catch(function(){
                alert('删除失败，有学生在该寝室')
            })
        },
        updataRow(row){
            this.$router.push(`/editdormitory?building=${row.building}&room=${row.room}`)
        },
        page(currentPage){
            this.formInline.page = currentPage
            this.reload();
        },
        add(){
            if(this.AddClass == 'come'){
                this.load();
                this.reload();
                this.AddClass = 'leave'
            }else
                this.AddClass = 'come'
        }
    },
    watch:{
        building(newValue,oldValue){
            this.onSubmit()
        },
        floor(newValue,oldValue){
            this.onSubmit()
        }
    },
    mounted(){
        this.load();
        this.reload();
    }
}
</script>

<style scoped>
    .el-form{
        margin-top: 25px;
        width: 70%;
        text-align: center;
    }
    .el-form-item{
        margin-right: 50px;
    }
    .el-button{
        margin-left: 0;
        margin-right: 10px;
    }
    .jiantou{
        cursor: pointer;
        position: absolute;
        right: -10%;
        top:50%;
        transform: translate(0,-50%);
        height: 50px;
        width: 50px;
        border-radius: 50%;
        box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.5);
        background-image: radial-gradient(
            25px at center,
            #0077227b,
            #00ff4871
        );
        line-height: 50px;
        color: #fff;
        font-size: 25px;
        text-align: center;
    }
    .jiantou:active{
        background-color: yellow;
    }
    .add{
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 3px 3px 6px 2px rgba(0, 0, 0, 0.5);
        z-index: 10;
        position: absolute;
        right: -10%;
        top:50%;
        transform: translate(115%,-65%);
    }
    @keyframes leave{
        from{
            transform: translate(-30%,-65%);
        }
        to{
            transform: translate(115%,-65%);
        }
    }
    @keyframes come{
        from{
            transform: translate(115%,-65%);
        }
        to{
            transform: translate(-30%,-65%);
        }
    }
    .leave{
        animation: leave 1s;
        transform: translate(115%,-65%);
    }
    .come{
        animation: come 1s;
        transform: translate(-30%,-65%);
    }
</style>